﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
</head>
<body>

<div class="container-fluid text-center bg-secondary text-white">
    <div class="row py-5">
        <div class="col border border-white">Col 1</div>
        <div class="col border border-white">Col 2</div>
        <div class="col border border-white">Col 3</div>
        <div class="col border border-white">Col 4</div>
        <div class="col border border-white">Col 5</div>
        <div class="col border border-white">Col 6</div>
        <div class="col border border-white">Col 7</div>
        <div class="col border border-white">Col 8</div>
        <div class="col border border-white">Col 9</div>
        <div class="col border border-white">Col 10</div>
        <div class="col border border-white">Col 11</div>
        <div class="col border border-white">Col 12</div>
    </div>
    <div class="row py-5">
        <div class="col-2 border border-white">Col 1</div>
        <div class="col-2 border border-white">Col 2</div>
        <div class="col-2 border border-white">Col 3</div>
        <div class="col-2 border border-white">Col 4</div>
        <div class="col-2 border border-white">Col 5</div>
        <div class="col border border-white">Col 6</div>
    </div>
    <div class="row py-5">
        <div class="col-3 border border-white">Col 1</div>
        <div class="col-3 border border-white">Col 2</div>
        <div class="col-3 border border-white">Col 3</div>
        <div class="col-3 border border-white">Col 3</div>
    </div>
    <div class="row py-5">
        <div class="col-6 border border-white">Col 1</div>
        <div class="col-6 border border-white">Col 2</div>
    </div>
    <div class="row py-5">
        <div class="col-8 border border-white">
            <div class="row">
                <div class="col-4 bg-info">Info</div>
                <div class="col-8 bg-danger">Danger</div>
            </div>
        </div>
        <div class="col-4 border border-white">Col 2</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
        crossorigin="anonymous"></script>
</body>
</html>